<template>
  <div class="alarm_rules">
    <div class="alarm_rules_item">
      <span class="weight">{{ info.groupName }} : </span>
      <!-- <a-switch
        style="margin-left: 10px"
        checkedValue="1"
        unCheckedValue="0"
        v-model:checked="info.status"
      ></a-switch> -->
    </div>
    <div class="content">
      <div class="alarm_rules_content" v-if="info.groupCategory === '03'">
        <div
          class="alarm_rules_"
          v-for="(item, index) in info.areaRules || info.rules"
          :key="index"
        >
          <div class="top_console">
            <span style="color: #999">
              {{ info.groupName + (index + 1) }}
              <a-switch
                style="margin-left: 10px"
                :unCheckedValue="false"
                :checkedValue="true"
                v-model:checked="item.rules[0].status"
              ></a-switch>
            </span>
          </div>
          <div class="org_map_area">
            <rwTreeSelect
              type="org"
              size="small"
              class="select"
              v-model="item.organizationId"
            ></rwTreeSelect>
            <rwSelect
              type="maps"
              size="small"
              class="m_l m_r select"
              :xhrParams="{ data: 'data', value: item.mapId }"
              v-model="item.mapId"
              @change="(e) => (item.mapId = e)"
            ></rwSelect>
            <rwSelect
              v-if="item.mapId"
              type="area"
              size="small"
              watchParams="mapId"
              :xhrParams="{ data: 'data', mapId: item.mapId, value: item.areaId }"
              class="select"
              v-model="item.areaId"
            ></rwSelect>
          </div>
          <div class="alarm_it">
            <p>告警延迟设置：</p>
            <rwDictSelect code="WARNING_DELAY" v-model="info.alarmx"></rwDictSelect>
          </div>
          <div class="alarm_time" v-for="x in item.rules" :key="x.id">
            <p>告警时间段设置：</p>
            <ul>
              <li v-for="(item, index) in x.timeRules" :key="item.id" style="margin: 10px 0">
                <a-time-range-picker v-model:value="item.value" class="select" />
                <a-button
                  @click="deltimeRules(index)"
                  v-if="index != 0"
                  type="text"
                  :icon="h(DeleteOutlined)"
                  style="color: red"
                ></a-button>
                <a-button
                  v-if="x.timeRules.length === index + 1"
                  @click="addtimeRules(x)"
                  type="text"
                  style="color: #138ce7"
                  >新增时间段</a-button
                >
              </li>
            </ul>
            <a-button
              v-if="!x.timeRules.length"
              @click="addtimeRules(x)"
              type="text"
              style="color: #6ca50f"
              >新增时间段</a-button
            >
          </div>
          <a-button @click="addAreaRules" type="text" style="color: #4183d7"
            >继续添加{{ info.groupName }}区域</a-button
          >
        </div>
      </div>
      <div
        class="alarm_rules_content"
        v-if="info.groupCategory === '01' && info.groupType === 'Sensing'"
      >
        <div class="alarm_rules" v-for="x in info.rules" :key="x.id">
          <div class="input" v-for="n in x.dataRules" :key="n.id" style="margin: 10px 0">
            <span class="desc" style="color: red"> {{ x.alarmName }}：</span>

            <a-input
              v-if="n.lowValue"
              v-model:value="n.lowValue"
              placeholder="Basic usage"
              class="input_alarm"
            >
              <template #prefix> {{ n.dataCategory.name }}：</template>
              <template #suffix> {{ n.dataCategory.unit }} </template>
            </a-input>
            <a-input
              v-else
              v-model:value="n.highValue"
              placeholder="Basic usage"
              class="input_alarm"
            >
              <template #prefix> {{ n.dataCategory.name }}：</template>
              <template #suffix> {{ n.dataCategory.unit }} </template>
            </a-input>
            <a-switch
              v-model:checked="x.status"
              style="margin-left: 20px"
              :unCheckedValue="false"
              :checkedValue="true"
            ></a-switch>
          </div>
        </div>
      </div>
      <div
        class="alarm_rules_content"
        v-if="info.groupCategory === '01' && info.groupType !== 'Sensing'"
      >
        <div class="alarm_rules" v-for="x in info.rules" :key="x.id">
          <div class="input" v-for="n in x.dataRules" :key="n.id" style="margin: 10px 0">
            <span class="desc" style="color: red"> {{ x.alarmName }}：</span>
            <a-input
              v-if="n.lowValue"
              v-model:value="n.lowValue"
              placeholder="Basic usage"
              class="input_alarm"
            >
              <template #prefix> {{ n.dataCategory.name }}：</template>
              <template #suffix> {{ n.dataCategory.unit }} </template>
            </a-input>
            <a-input
              v-else
              v-model:value="n.highValue"
              placeholder="Basic usage"
              class="input_alarm"
            >
              <template #prefix> {{ n.dataCategory.name }}：</template>
              <template #suffix> {{ n.dataCategory.unit }} </template>
            </a-input>
            <a-switch
              v-model:checked="x.status"
              style="margin-left: 20px"
              :unCheckedValue="false"
              :checkedValue="true"
            ></a-switch>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, toRef, h } from 'vue';

  import rwSelect from '@/components/rw/orgSelect.vue';

  import rwTreeSelect from '@/components/rw/treeSelect.vue';

  import rwDictSelect from '@/components/rw/dictSelect.vue';

  import { DeleteOutlined } from '@ant-design/icons-vue';

  import dayjs from 'dayjs';

  export default defineComponent({
    name: 'alarm_rules',
    components: { rwSelect, rwTreeSelect, rwDictSelect },
    props: {
      type: {
        type: String,
        default: 'SensingWarn',
      },
      info: {
        type: Object,
        default: () => {
          return {
            areaId: '',
            mapId: '',
            organizationId: '',
            isEnable: false,
            alarmx: '',
            timeRules: [{ id: '0' }],
          };
        },
      },
    },
    setup(props) {
      let { type, info } = props;

      const isSessing = {
        LowPower: true,
        Sensing: true,
      };

      info = toRef(info);

      // info.value.timeRules = info.value.timeRules.map((item) => {
      //   return {
      //     value: [dayjs(item.startingTime, 'HH:mm'), dayjs(item.finalTime, 'HH:mm')],
      //   };
      // });

      function addtimeRules(x) {
        x.timeRules.push({
          id: Math.random(),
          value: [],
        });
      }
      function addAreaRules() {
        info.value.areaRules.push({
          areaId: null,
          areaName: null,
          mapId: null,
          mapName: null,
          rules: [],
        });
      }
      function deltimeRules(index) {
        info.value.timeRules.splice(index, 1);
      }
      function delAlarmRules(index) {
        info.value.areaRules.splice(index, 1);
      }

      return {
        type,
        info,
        isSessing,
        DeleteOutlined,
        addAreaRules,
        addtimeRules,
        deltimeRules,
        delAlarmRules,
        h,
      };
    },
  });
</script>

<style lang="less" scoped>
  .top_console {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    margin: 0 30px;
  }

  .input_alarm {
    width: 240px;
  }

  .m_l {
    margin-left: 10px;
  }

  .m_r {
    margin-right: 10px;
  }

  .alarm_rules_ {
    padding: 20px 0;
    border-bottom: 1px dashed #ddd;
  }

  .alarm_rules {
    .select {
      width: 300px;

      ::v-deep .ant-select {
        width: 100%;
      }
    }

    .alarm_rules_item,
    .alarm_rules_content .org_map_area {
      display: flex;
      align-items: center;
      height: 40px;

      .weight {
        font-weight: 600;
      }
    }

    .alarm_it,
    .alarm_time {
      margin-top: 10px;

      p {
        font-weight: 600;
      }
    }
  }
</style>